Jump to content

Описание псевдоэлементов :before и :after


Catherine
 Share

Recommended Posts

Сразу к делу :)

Есть книга Эрика Мейера "CSS - Каскадные таблицы стилей", 3-е издание в электронном виде.

Глава 12. Списки и генерируемое содержимое, стр. 429

Может показаться, что позиционирование позволило бы добиться желаемого результата, но CSS2 и CSS2.1 специально запрещают перемещение или позиционирование содержимого элементов :before и :after. Свойства стилевого оформления списков, как и свойства таблиц, запрещены. Кроме того, действуют следующие ограничения:

- если областью действия селекторов :before или :after является блочный элемент, свойство display может принимать только значения none, inline, block и marker. Все остальные значения интерпретируются как block.

- если областью действия селекторов :before или :after является строковый элемент, свойство display может принимать только значения none и inline. Все остальные значения интерпретируются как inline.

В спецификации CSS2 это описано, и та же информация на htmlbook'е в описании псевдоэлементов :before и :after

В спецификации CSS2.1 эта информация уже отсутствует, ссылка

В следствие чего возникает закономерный вопрос - информацию на htmlbook'e и в книге Мейера можно считать устаревшей, или я пока чего-то не понимаю? Помогите, пожалуйста, разобраться.

UPD. Возвращаясь к посту о тупости некоторых браузеров, логично ли предположить, что хром (точнее webkit-браузеры, и, возможно, некоторые другие) просто еще не поддерживает внесенные в спецификацию изменения, и его поведение в таком случае вполне объяснимо?

Примечание: в последней опере, ФФ и ие8+ все ок

Edited by Catherine
  • Like 1
Link to comment
Share on other sites

Catherine,

В следствие чего возникает закономерный вопрос - информацию на htmlbook'e и в книге Мейера можно считать устаревшей, или я пока чего-то не понимаю?

Я считаю, что инфу надо бы обновить всё-таки.

UPD. Возвращаясь к посту о тупости некоторых браузеров, логично ли предположить, что хром (точнее webkit-браузеры, и, возможно, некоторые другие) просто еще не поддерживает внесенные в спецификацию изменения, и его поведение в таком случае вполне объяснимо?

Скорее всего так оно и есть. Т.к. поведение браузера Chrome в этом случае можно смело назвать глупым и нелогичным. Блок всегда должен переноситься на следующую строку и это правильно, чему свидетельствует простой пример:

Ну, и как ты знаешь, Катюш, на днях я отправил письмо по этому поводу Эрику Майеру, так что очень надеюсь, что его ответ окончательно поставит точку в этом вопросе :)

  • Like 2
Link to comment
Share on other sites

Да. Она присутствовала в CSS 2.1 в 2003 году, а потом ее убрали.

Я подозреваю, что эти изменения были внесены в CSS 2.1 уже гораздо позже, поскольку сама книга вышла в 2006 году.

Может, кто-то подскажет, где можно просмотреть информацию по внесенным изменениям и дате их внесения в спецификации, и существует ли документ, содержащий подобный список?

psywalker, спасибо за ответ!

Очень было бы любопытно узнать мнение Мейера по этому вопросу, буду признательна за любую информацию.

Edited by Catherine
Link to comment
Share on other sites

  • 9 months later...

на днях я отправил письмо по этому поводу Эрику Майеру, так что очень надеюсь, что его ответ окончательно поставит точку в этом вопросе smile.gif

К сожалению, текста письма у меня нет, но, если кому интересно, то ответ Ерика Мейера звучал приблизительно так:

это было очень давно, поэтому не исключено, что информация могла устареть

Точка поставлена :)

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy